From 4128ff93dd89fa59015f33b2179f73ee39631cef Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Wed, 22 Apr 2015 14:42:58 +0200 Subject: [PATCH] Adwaita: simplify entry vertical linking. Now it should be "right" in basically every combination of entries and buttons. --- gtk/theme/Adwaita/_common.scss | 112 +++++++------------ gtk/theme/Adwaita/_drawing.scss | 4 +- gtk/theme/Adwaita/gtk-contained-dark.css | 132 ++++------------------- gtk/theme/Adwaita/gtk-contained.css | 132 ++++------------------- 4 files changed, 86 insertions(+), 294 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 385d6e356e..ec1a1387dd 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -300,78 +300,6 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); } } - .linked.vertical > & { //FIXME comment stuff and make the whole thing smarter. - @include entry(normal, $edge: none); - background-image: linear-gradient(to bottom, $base_color); - border-bottom-color: mix($borders_color, $base_color, 30%); - box-shadow: none; - @extend %linked_vertical; - &:focus { - border-color: entry_focus_border($selected_bg_color); - box-shadow: entry_focus_shadow($selected_bg_color), - 0 -1px 0 0 entry_focus_border($selected_bg_color); - @extend %linked_vertical; - } - &:insensitive { - @include entry(insensitive, $edge: none); - border-bottom-color: mix($borders_color, $base_color, 30%); - @extend %linked_vertical; - &:backdrop { - @include entry(backdrop-insensitive, $edge: none); - border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - @extend %linked_vertical; - } - } - &:backdrop { - @include entry(backdrop, $edge: none); - border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - @extend %linked_vertical; - } - &:first-child { - @include entry(normal, $edge: none); - border-bottom-color: mix($borders_color, $base_color, 30%); - &:focus { @include entry(focus, $edge: none); } - &:insensitive { - @include entry(insensitive, $edge: none); - border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - @extend %linked_vertical:first-child; - &:backdrop { - @include entry(backdrop-insensitive, $edge: none); - border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - border-top-style: solid; - } - } - &:backdrop { - @include entry(backdrop, $edge: none); - border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - @extend %linked_vertical:first-child; - } - } - &:last-child { - @include entry(normal); - background-image: linear-gradient(to bottom, $base_color); - box-shadow: _widget_edge(); - &:focus { - border-color: entry_focus_border($selected_bg_color); - box-shadow: entry_focus_shadow($selected_bg_color), - 0 -1px 0 0 entry_focus_border($selected_bg_color), - _widget_edge(); - @extend %linked_vertical:last-child; - } - &:insensitive { - @include entry(insensitive); - @extend %linked_vertical:last-child; - &:backdrop { - @include entry(backdrop-insensitive); - @extend %linked_vertical:last-child; - } - } - &:backdrop { - @include entry(backdrop); - @extend %linked_vertical:last-child; - } - } - } .osd & { @include entry(osd); &:focus { @include entry(osd-focus); } @@ -380,6 +308,42 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers } } +// Vertically linked entries +// FIXME: take care of "colored" entries +.linked.vertical { + > .entry { @extend %linked_vertical; } + + // remove the edge hilight + > .entry:not(:last-child) { box-shadow: none; } + // add back the focus shadow on focused entries + > .entry:focus:not(last-child) { box-shadow: entry_focus_shadow(); } + + + // brighter border between linked entries + > .entry:not(:insensitive) + .entry:not(:insensitive) { + border-top-color: mix($borders_color, $base_color, 30%); + background-image: linear-gradient(to bottom, $base_color); + &:backdrop { + border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); + background-image: linear-gradient(to bottom, $backdrop_base_color); + } + } + + // color back the top border of a linked focused entry following another entry and add back the focus shadow. + // :not(:only-child) is a specificity bump hack. + > .entry:not(:only-child) + .entry:focus { + border-top-color: entry_focus_border(); + box-shadow: entry_focus_shadow(); + } + + // this takes care of coloring the top border of the focused entry subsequent widget + > .entry:focus:not(:only-child) + .entry, + > .entry:focus:not(:only-child) + .button, + > .entry:focus:not(:only-child) + GtkComboBox > .button, + > .entry:focus:not(:only-child) + GtkComboBoxText > .button { border-top-color: entry_focus_border(); } +} + + /*********** * Buttons * ***********/ @@ -772,18 +736,18 @@ $_dot_color: if($variant=='light', $selected_bg_color, %linked_vertical_middle { border-left-style: solid; - border-top-style: none; + border-bottom-style: none; border-radius: 0; } %linked_vertical{ @extend %linked_vertical_middle; &:first-child { - border-style: solid; border-radius: 3px 3px 0 0; } &:last-child { border-radius: 0 0 3px 3px; + border-style: solid; } &:only-child { border-radius: 3px; diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss index 34fa8c72ca..a9aafd1fd0 100644 --- a/gtk/theme/Adwaita/_drawing.scss +++ b/gtk/theme/Adwaita/_drawing.scss @@ -19,12 +19,12 @@ // entries -@function entry_focus_border($fc) { +@function entry_focus_border($fc:$selected_bg_color) { @if $variant == 'light' { @return $fc; } @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc,35%)); } } -@function entry_focus_shadow($fc) { +@function entry_focus_shadow($fc:$selected_bg_color) { @return inset 0 0 0 1px $fc; } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 529ccc53fc..47e63d57fc 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -253,111 +253,6 @@ GtkTextView { color: #215d9c; } .entry.image:backdrop { color: #7e8080; } - .linked.vertical > .entry { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: white; - border-color: #1c1f1f; - box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0); - background-image: linear-gradient(to bottom, #292929); - border-bottom-color: #252626; - box-shadow: none; } - .linked.vertical > .entry:focus { - border-color: #0f2b48; - box-shadow: inset 0 0 0 1px #215d9c, 0 -1px 0 0 #0f2b48; } - .linked.vertical > .entry:insensitive { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: #939695; - border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #323636); - box-shadow: none; - border-bottom-color: #252626; } - .linked.vertical > .entry:insensitive:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: #5d6767; - border-color: #1e2222; - background-image: linear-gradient(to bottom, #323636); - box-shadow: none; - border-bottom-color: #272929; } - .linked.vertical > .entry:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: #d4d4d4; - border-color: #1e2222; - background-image: linear-gradient(to bottom, #2c2c2c); - box-shadow: none; - border-bottom-color: #272929; } - .linked.vertical > .entry:first-child { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: white; - border-color: #1c1f1f; - box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0); - border-bottom-color: #252626; } - .linked.vertical > .entry:first-child:focus { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - box-shadow: inset 0 0 0 1px #215d9c; - border-color: #0f2b48; } - .linked.vertical > .entry:first-child:insensitive { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: #939695; - border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #323636); - box-shadow: none; - border-bottom-color: #272929; } - .linked.vertical > .entry:first-child:insensitive:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: #5d6767; - border-color: #1e2222; - background-image: linear-gradient(to bottom, #323636); - box-shadow: none; - border-bottom-color: #272929; - border-top-style: solid; } - .linked.vertical > .entry:first-child:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: #d4d4d4; - border-color: #1e2222; - background-image: linear-gradient(to bottom, #2c2c2c); - box-shadow: none; - border-bottom-color: #272929; } - .linked.vertical > .entry:last-child { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: white; - border-color: #1c1f1f; - box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0), 0 1px rgba(238, 238, 236, 0.1); - background-image: linear-gradient(to bottom, #292929); - box-shadow: 0 1px rgba(238, 238, 236, 0.1); } - .linked.vertical > .entry:last-child:focus { - border-color: #0f2b48; - box-shadow: inset 0 0 0 1px #215d9c, 0 -1px 0 0 #0f2b48, 0 1px rgba(238, 238, 236, 0.1); } - .linked.vertical > .entry:last-child:insensitive { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: #939695; - border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #323636); - box-shadow: 0 1px rgba(238, 238, 236, 0.1); } - .linked.vertical > .entry:last-child:insensitive:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: #5d6767; - border-color: #1e2222; - background-image: linear-gradient(to bottom, #323636); - box-shadow: 0 1px rgba(238, 238, 236, 0); } - .linked.vertical > .entry:last-child:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); - color: #d4d4d4; - border-color: #1e2222; - background-image: linear-gradient(to bottom, #2c2c2c); - box-shadow: 0 1px rgba(238, 238, 236, 0); } .osd .entry { background-color: transparent; background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%); @@ -399,6 +294,25 @@ GtkTextView { text-shadow: none; icon-shadow: none; } +.linked.vertical > .entry:not(:last-child) { + box-shadow: none; } +.linked.vertical > .entry:focus:not(last-child) { + box-shadow: inset 0 0 0 1px #215d9c; } +.linked.vertical > .entry:not(:insensitive) + .entry:not(:insensitive) { + border-top-color: #252626; + background-image: linear-gradient(to bottom, #292929); } + .linked.vertical > .entry:not(:insensitive) + .entry:not(:insensitive):backdrop { + border-top-color: #272929; + background-image: linear-gradient(to bottom, #2c2c2c); } +.linked.vertical > .entry:not(:only-child) + .entry:focus { + border-top-color: #0f2b48; + box-shadow: inset 0 0 0 1px #215d9c; } +.linked.vertical > .entry:focus:not(:only-child) + .entry, +.linked.vertical > .entry:focus:not(:only-child) + .button, +.linked.vertical > .entry:focus:not(:only-child) + GtkComboBox > .button, +.linked.vertical > .entry:focus:not(:only-child) + GtkComboBoxText > .button { + border-top-color: #0f2b48; } + /*********** * Buttons * ***********/ @@ -1242,22 +1156,22 @@ GtkComboBox.combobox-entry .titlebar .button.titlebutton, border-radius: 3px; border-style: solid; } -.linked.vertical > .entry, .linked.vertical > .entry:focus, .linked.vertical > .entry:insensitive, .linked.vertical > .entry:insensitive:backdrop, .linked.vertical > .entry:backdrop, .linked.vertical > .button, .header-bar .linked.vertical > .button.titlebutton, +.linked.vertical > .entry, .linked.vertical > .button, .header-bar .linked.vertical > .button.titlebutton, .titlebar .linked.vertical > .button.titlebutton, .linked.vertical > .button:hover, .linked.vertical > .button:active, .linked.vertical > .button:checked, .linked.vertical > .button:backdrop, .linked.vertical > GtkComboBoxText > .button, .linked.vertical > GtkComboBox > .button { border-left-style: solid; - border-top-style: none; + border-bottom-style: none; border-radius: 0; } .linked.vertical > .entry:first-child, .linked.vertical > .button:first-child, .header-bar .linked.vertical > .button.titlebutton:first-child, .titlebar .linked.vertical > .button.titlebutton:first-child, .linked.vertical > GtkComboBoxText:first-child > .button, .linked.vertical > GtkComboBox:first-child > .button { - border-style: solid; border-radius: 3px 3px 0 0; } .linked.vertical > .entry:last-child, .linked.vertical > .button:last-child, .header-bar .linked.vertical > .button.titlebutton:last-child, .titlebar .linked.vertical > .button.titlebutton:last-child, .linked.vertical > GtkComboBoxText:last-child > .button, .linked.vertical > GtkComboBox:last-child > .button { - border-radius: 0 0 3px 3px; } + border-radius: 0 0 3px 3px; + border-style: solid; } .linked.vertical > .entry:only-child, .linked.vertical > .button:only-child, .header-bar .linked.vertical > .button.titlebutton:only-child, .titlebar .linked.vertical > .button.titlebutton:only-child, .linked.vertical > GtkComboBoxText:only-child > .button, .linked.vertical > GtkComboBox:only-child > .button { diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 8d33910e24..817b4db3d8 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -253,111 +253,6 @@ GtkTextView { color: #4a90d9; } .entry.image:backdrop { color: #a3a6a7; } - .linked.vertical > .entry { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: black; - border-color: #a1a1a1; - box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0); - background-image: linear-gradient(to bottom, #ffffff); - border-bottom-color: #e2e2e2; - box-shadow: none; } - .linked.vertical > .entry:focus { - border-color: #4a90d9; - box-shadow: inset 0 0 0 1px #4a90d9, 0 -1px 0 0 #4a90d9; } - .linked.vertical > .entry:insensitive { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: #8d9091; - border-color: #a1a1a1; - background-image: linear-gradient(to bottom, #f4f4f4); - box-shadow: none; - border-bottom-color: #e2e2e2; } - .linked.vertical > .entry:insensitive:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: #c7c7c7; - border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #f4f4f4); - box-shadow: none; - border-bottom-color: #e4e4e4; } - .linked.vertical > .entry:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: #323232; - border-color: #a8a8a8; - background-image: linear-gradient(to bottom, white); - box-shadow: none; - border-bottom-color: #e4e4e4; } - .linked.vertical > .entry:first-child { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: black; - border-color: #a1a1a1; - box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0); - border-bottom-color: #e2e2e2; } - .linked.vertical > .entry:first-child:focus { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - box-shadow: inset 0 0 0 1px #4a90d9; - border-color: #4a90d9; } - .linked.vertical > .entry:first-child:insensitive { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: #8d9091; - border-color: #a1a1a1; - background-image: linear-gradient(to bottom, #f4f4f4); - box-shadow: none; - border-bottom-color: #e4e4e4; } - .linked.vertical > .entry:first-child:insensitive:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: #c7c7c7; - border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #f4f4f4); - box-shadow: none; - border-bottom-color: #e4e4e4; - border-top-style: solid; } - .linked.vertical > .entry:first-child:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: #323232; - border-color: #a8a8a8; - background-image: linear-gradient(to bottom, white); - box-shadow: none; - border-bottom-color: #e4e4e4; } - .linked.vertical > .entry:last-child { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: black; - border-color: #a1a1a1; - box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px white; - background-image: linear-gradient(to bottom, #ffffff); - box-shadow: 0 1px white; } - .linked.vertical > .entry:last-child:focus { - border-color: #4a90d9; - box-shadow: inset 0 0 0 1px #4a90d9, 0 -1px 0 0 #4a90d9, 0 1px white; } - .linked.vertical > .entry:last-child:insensitive { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: #8d9091; - border-color: #a1a1a1; - background-image: linear-gradient(to bottom, #f4f4f4); - box-shadow: 0 1px white; } - .linked.vertical > .entry:last-child:insensitive:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: #c7c7c7; - border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #f4f4f4); - box-shadow: 0 1px rgba(255, 255, 255, 0); } - .linked.vertical > .entry:last-child:backdrop { - background-color: transparent; - background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); - color: #323232; - border-color: #a8a8a8; - background-image: linear-gradient(to bottom, white); - box-shadow: 0 1px rgba(255, 255, 255, 0); } .osd .entry { background-color: transparent; background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%); @@ -399,6 +294,25 @@ GtkTextView { text-shadow: none; icon-shadow: none; } +.linked.vertical > .entry:not(:last-child) { + box-shadow: none; } +.linked.vertical > .entry:focus:not(last-child) { + box-shadow: inset 0 0 0 1px #4a90d9; } +.linked.vertical > .entry:not(:insensitive) + .entry:not(:insensitive) { + border-top-color: #e2e2e2; + background-image: linear-gradient(to bottom, #ffffff); } + .linked.vertical > .entry:not(:insensitive) + .entry:not(:insensitive):backdrop { + border-top-color: #e4e4e4; + background-image: linear-gradient(to bottom, white); } +.linked.vertical > .entry:not(:only-child) + .entry:focus { + border-top-color: #4a90d9; + box-shadow: inset 0 0 0 1px #4a90d9; } +.linked.vertical > .entry:focus:not(:only-child) + .entry, +.linked.vertical > .entry:focus:not(:only-child) + .button, +.linked.vertical > .entry:focus:not(:only-child) + GtkComboBox > .button, +.linked.vertical > .entry:focus:not(:only-child) + GtkComboBoxText > .button { + border-top-color: #4a90d9; } + /*********** * Buttons * ***********/ @@ -1242,22 +1156,22 @@ GtkComboBox.combobox-entry .titlebar .button.titlebutton, border-radius: 3px; border-style: solid; } -.linked.vertical > .entry, .linked.vertical > .entry:focus, .linked.vertical > .entry:insensitive, .linked.vertical > .entry:insensitive:backdrop, .linked.vertical > .entry:backdrop, .linked.vertical > .button, .header-bar .linked.vertical > .button.titlebutton, +.linked.vertical > .entry, .linked.vertical > .button, .header-bar .linked.vertical > .button.titlebutton, .titlebar .linked.vertical > .button.titlebutton, .linked.vertical > .button:hover, .linked.vertical > .button:active, .linked.vertical > .button:checked, .linked.vertical > .button:backdrop, .linked.vertical > GtkComboBoxText > .button, .linked.vertical > GtkComboBox > .button { border-left-style: solid; - border-top-style: none; + border-bottom-style: none; border-radius: 0; } .linked.vertical > .entry:first-child, .linked.vertical > .button:first-child, .header-bar .linked.vertical > .button.titlebutton:first-child, .titlebar .linked.vertical > .button.titlebutton:first-child, .linked.vertical > GtkComboBoxText:first-child > .button, .linked.vertical > GtkComboBox:first-child > .button { - border-style: solid; border-radius: 3px 3px 0 0; } .linked.vertical > .entry:last-child, .linked.vertical > .button:last-child, .header-bar .linked.vertical > .button.titlebutton:last-child, .titlebar .linked.vertical > .button.titlebutton:last-child, .linked.vertical > GtkComboBoxText:last-child > .button, .linked.vertical > GtkComboBox:last-child > .button { - border-radius: 0 0 3px 3px; } + border-radius: 0 0 3px 3px; + border-style: solid; } .linked.vertical > .entry:only-child, .linked.vertical > .button:only-child, .header-bar .linked.vertical > .button.titlebutton:only-child, .titlebar .linked.vertical > .button.titlebutton:only-child, .linked.vertical > GtkComboBoxText:only-child > .button, .linked.vertical > GtkComboBox:only-child > .button { -- 2.30.2